<template>
    <div>
         <!--面包屑功能-->
       <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    <!--查询条件卡片区 start-->
    <el-card border-radius:30px class="zxdiv">
        <el-form :inline="true" :model="QueryParams" label-width="100px">
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-form-item label="订单编号">
                        <!--关键的订单编号用query参数-->
                        <el-input v-model="QueryParams.query" placeholder="订单编号"></el-input>
                      </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="用户ID">
                        <el-input v-model="QueryParams.user_id" placeholder="用户ID"></el-input>
                      </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="支付方式">
                        <el-select v-model="QueryParams.pay_status" placeholder="支付方式">
                        <el-option v-for="(item,index) in zffs" :key="index"
                         :label="item.label" :value="item.value"></el-option>
                        <!-- <el-option label="微信" value="0"></el-option>
                        <el-option label="支付宝" value="1"></el-option>
                        <el-option label="银联支付" value="2"></el-option> -->
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="是否发货">
                        <el-select v-model="QueryParams.is_send" placeholder="是否发货">
                          <el-option label="不限" value=""></el-option>
                          <el-option label="是" value="是"></el-option>
                          <el-option label="否" value="否"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-form-item label="公司/个人">
                        <el-select v-model="QueryParams.order_fapiao_title" placeholder="公司/个人">
                         <el-option label="不限" value=""></el-option>
                         <el-option label="个人" value="个人"></el-option>
                          <el-option label="公司" value="公司"></el-option>
                         </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="公司名称">
                        <el-input v-model="QueryParams.order_fapiao_company" placeholder="公司名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发票内容">
                        <el-input v-model="QueryParams.order_fapiao_content" placeholder="发票内容"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发货地址">
                        <el-input v-model="QueryParams.consignee_addr" placeholder="发货地址"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" @click="orderSeacher">查询</el-button>
            </el-form-item>
          </el-form>
    </el-card>
    <!--卡片区 end-->
    <el-card>
        <!--放数据表格,找表格看-->
    <el-table
    :data="orderList"
    border
    stripe
    style="width: 100%">
    <el-table-column type="index">
    </el-table-column>

    <el-table-column
    prop="user_id"
    label="用户Id"
    width="80">
  </el-table-column>
    <el-table-column
      prop="order_number"
      label="订单编号"
      width="240">
    </el-table-column>

    <el-table-column
    prop="order_price"
    label="订单金额"
    width="100">
  </el-table-column>

  <el-table-column
  prop="order_pay"
  label="付款方式"
  width="100">
</el-table-column>

<el-table-column
prop="is_send"
label="是否发货"
width="100">
</el-table-column>

<el-table-column
prop="order_pay"
label="付款方式"
width="120">
</el-table-column>

<el-table-column
prop="trade_no"
label="支付帐号"
width="120">
</el-table-column>

<el-table-column
prop="order_fapiao_title"
label="开票单位"
width="120">
</el-table-column>

<el-table-column
prop="order_fapiao_company"
label="开票名称"
width="120">
</el-table-column>

<el-table-column
prop="order_fapiao_content"
label="开票内容"
width="120">
</el-table-column>

<el-table-column
prop="consignee_addr"
label="收货地址"
width="120">
</el-table-column>

<el-table-column
prop="pay_status"
label="收货地址"
width="120">
</el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="160">
      <template slot-scope="scope">
        <el-button @click="ckwldialog(scope.row.order_id)"
        type="text" size="small">查看物流</el-button>
        <el-button type="text" size="small" @click="updateAddress">修改地址</el-button>
      </template>
    </el-table-column>
</el-table>

<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="QueryParams.pagenum"
:page-sizes="[10, 20, 50, 100,200]"
:page-size="QueryParams.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>

</el-card>
<!--修改收货地址对话框 start -->
<el-dialog
  title="修改收货地址"
  :visible.sync="EditSHDzdialogVisible"
  width="40%" @close="clearEditOrderForm">
  <!--修改表单区 start -->
  <el-form :model="EditOrderForm" :rules="EditOrderRules"
  ref="EditOrderRef" label-width="100px">
   <el-form-item label="原地址">
     {{ olddz }}
   </el-form-item>
    <el-form-item label="省市县" prop="xsx">
      <el-cascader
      :options="cityOptions"
      :value="EditOrderForm.xsx"
    >
    </el-cascader>
    </el-form-item>
    <el-form-item label="详细地址" prop="dz">
        <el-input v-model="EditOrderForm.dz"></el-input>
      </el-form-item>
 </el-form>
  <!--修改表单区 end -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="EditSHDzdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="savaEditAddress">确 定</el-button>
  </span>
</el-dialog>
<!--修改收货地址对话框 end -->

<!--修改物流对话框 start -->
<el-dialog
  title="查询物流"
  :visible.sync="cxwldialogVisible"
  width="30%"
  >
  <el-timeline :reverse="true">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.time">
      {{activity.context}}
    </el-timeline-item>
  </el-timeline>
</el-dialog>
<!--修改物流对话框 end -->
    </div>
</template>

<script>
import cityOptions from './citydata.js'
export default {
  data() {
    return {
    // 查询数据参数定义
      QueryParams: {
        query: '',
        pagenum: 1, // pagenum
        pagesize: 10,
        user_id: -1, // -1为不限
        pay_status: '-1', // -1不限
        is_send: '', //
        order_fapiao_title: '',
        order_fapiao_company: '',
        order_fapiao_content: '',
        consignee_addr: ''
      },
      // 支付方式下拉框数据
      zffs:
        [{
          value: '-1',
          label: '不限'
        },
        {
          value: '0',
          label: '微信'
        },
        {
          value: '1',
          label: '支付宝'
        },
        {
          value: '2',
          label: '银联支付'
        }
        ],
      // 表格数据集合
      orderList: [],
      // 总条数保存
      total: 0,
      // 修改收货地址对话框
      EditSHDzdialogVisible: false,
      // 修改地址表单数据
      EditOrderForm: {
        xsx: [],
        dz: ''
      },
      // 修改验证
      EditOrderRules: {
        xsx: [{ required: true, message: '请输入省市县', trigger: 'blur' }],
        dz: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
      },
      // 省市县数据设置
      cityOptions,
      // 原地址
      olddz: '要修改的地址',
      // 查询物流对话框控制变量
      cxwldialogVisible: false,
      // 时序列数据
      activities: []
    }
  },
  methods: {
    // 通用订单查询方法
    async getOrderList() {
      const { data: res } = await this.$http.get('orders', { params: this.QueryParams })
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.warning('获取订单列表失败')
      }
      // 设置当前集合
      this.orderList = res.data.goods
      // 总条数
      this.total = res.data.total
    },
    // 查询按钮方法调用
    orderSeacher() {
      this.QueryParams.pagenum = 1 // 重置
      this.getOrderList()
    },
    // 每页条数改变事件
    handleSizeChange (val) {
      this.QueryParams.pagesize = val
      this.getOrderList()
    },
    // 当前页码改变事件
    handleCurrentChange(val) {
      this.QueryParams.pagenum = val
      console.log(this.QueryParams)
      this.getOrderList()
    },
    // 行后修改地址
    updateAddress() {
    // 打开窗口
      this.EditSHDzdialogVisible = true
    },
    // 修改收货对话框关闭 清空表单
    clearEditOrderForm() {
      this.$refs.EditOrderRef.resetFields()
    },
    // 保存地址的修改操作
    savaEditAddress() {
      // 保存地址的修改
    },
    // 查看物流对话框
    async ckwldialog(id) {
      // 物流对话框显示
      console.log('id=' + id)
      const { data: res } = await this.$http.get('kuaidi/' + id)
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.warning('获取物流信息失败')
      }
      this.activities = res.data
      this.cxwldialogVisible = true
    }
  },
  // 加载
  mounted() {
    // 调用
    this.getOrderList()
  }
}
</script>

<style scoped>
    .zxdiv{
        padding-bottom: 5px;
    }
</style>
